<template>
  <view class="forgotPassword">
    <view class="nesting">
      <image src="/static/login/nesting.png" mode="" />
    </view>
    <tabTopBar
      :title="t('forgotPassword.forgotPassword')"
      :bgColor="'transparent'"
    />

    <view class="forgotPassword-info">
      <view class="steps">
        <view class="steps-num">1</view>
        <view class="steps-text">
          {{ t("forgotPassword.pleaseEnterYourRegisteredEmailAddress") }}
        </view>
      </view>
      <up-form
        labelPosition="left"
        :model="forgotPasswordInfo"
        :rules="rules"
        ref="uFormRef"
      >
        <up-form-item prop="email" borderBottom>
          <up-input
            :placeholder="t('forgotPassword.pleaseEnterYourEmailAddress')"
            v-model="forgotPasswordInfo.email"
            class="forgotPassword-input"
            color="#fff"
            prefixIconStyle="font-size: 40upx;color: #FFF"
          >
            <template #prefix>
              <view style="padding-top: 10upx">
                <image
                  src="/static/login/email.png"
                  style="width: 34upx"
                  mode="widthFix"
                />
              </view>
            </template>
            <template #suffix>
              <text style="color: #fff">*</text>
            </template>
          </up-input>
        </up-form-item>
        <up-form-item borderBottom>
          <up-button
            type="primary"
            class="btn-submit"
            :text="t('forgotPassword.nextBtn')"
            @click="handleNext"
          ></up-button>
        </up-form-item>
      </up-form>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
// import { onLoad } from "@dcloudio/uni-app";
import apis from "@/apis/index.js";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const uFormRef = ref(null);

const forgotPasswordInfo = reactive({
  email: "",
});
const rules = reactive({
  email: [
    {
      required: true,
      message: t("forgotPassword.pleaseEnterYourEmailAddress"),
      trigger: ["blur"],
    },
    {
      validator: async (rule, value, callback) => {
        if (!value) {
          callback(new Error(t("forgotPassword.pleaseEnterYourEmailAddress")));
          return;
        }
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailRegex.test(value)) {
          callback(new Error(t("forgotPassword.invalidEmailFormat")));
          return;
        }
        // 移除验证邮箱是否已被注册的逻辑
        callback();
      },
      trigger: ["blur"],
    },
  ],
});

const handleNext = () => {
  uFormRef.value.validate().then((valid) => {
    if (valid) {
      uni.showLoading({
        title: t("loadingText"),
        mask: true,
      });
      apis.getPasswordEmailCode({email:forgotPasswordInfo.email}).then((res) => {
        if (res.code == 200) {
          uni.hideLoading();
          uni.navigateTo({
            url: `/pages/forgotPassword/forgotCode?email=${forgotPasswordInfo.email}`,
          });
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped></style>

<style scoped lang="scss">
.forgotPassword {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #172c40, #08121e);
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 30upx 50upx 30upx;
  box-sizing: border-box;

  .nesting {
    width: 960upx;
    height: 1320upx;
    position: absolute;
    top: -100upx;
    left: 145upx;
    /* 让点击事件穿透该元素 */
    pointer-events: none;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .forgotPassword-info {
    width: 100%;
    padding: 160upx 30upx 0 30upx;
    box-sizing: border-box;
    text-align: center;
    .steps {
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30rpx;
      .steps-num {
        width: 48rpx;
        height: 48rpx;
        background-color: #64b7f6;
        text-align: center;
        line-height: 48rpx;
        border-radius: 50%;
        margin-right: 18rpx;
      }
      .steps-text {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        /* 白 */
        color: #ffffff;
      }
    }
    .logo {
      width: 164upx;
      height: 164upx;
      margin: 0 auto;
    }

    .forgotPassword-input {
      width: 100%;
      height: 88upx;
      background-color: #222d49;
      border-radius: 150upx;
      z-index: 1;
      padding: 0 36upx !important;
      box-sizing: border-box;
    }

    .btn-submit {
      width: 100%;
      height: 88upx;
      border-radius: 150upx;
      border: none;
      font-family: Alibaba PuHuiTi 3;
      font-size: 32upx;
      font-weight: 500;
      text-align: center;
      font-variation-settings: "opsz" auto;
    }
  }
  :deep(.u-form-item__body__right__message) {
    text-align: left;
  }
}
</style>
